<template>
  <div :style="style" class="fileShow">
    <el-image
      v-if="type === 'video'"
      :src="icon"
      :preview-teleported="true"
      :alt="fileName"
      @click="open"
    />
    <el-image
      v-else-if="type !== 'file'"
      :preview-teleported="true"
      :src="icon"
      :alt="fileName"
      :preview-src-list="[icon]"
    />
    <Icon v-else :icon="icon" style="cursor: pointer" size="40px" @click="open" />
    <Dialog
      :title="fileName"
      v-model="visible"
      width="900px"
      :destroy-on-close="true"
      @close="close"
    >
      <VideoPlayer v-if="payUri" ref="videoPlayer" :url="payUri" :poster="icon" />
    </Dialog>
  </div>
</template>
<script>
import { VideoPlayer } from '@/components/VideoPlayer'
import { getThumbnailUri } from '@/api/base/file'
import { Dialog } from '../Dialog'
import { formatFileUri } from '@/utils'
export default {
  components: {
    VideoPlayer,
    Dialog
  },
  props: {
    fileUri: {
      type: String,
      default: null
    },
    fileName: {
      type: String,
      default: null
    },
    style: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      visible: false,
      type: 'img',
      icon: null,
      payUri: null,
      ext: null,
      iconList: {
        '.pdf': 'pdf',
        '.docx': 'word',
        '.doc': 'word',
        '.xlsx': 'excel',
        '.xls': 'excel',
        '.mkv': 'video'
      },
      img: ['.jpg', '.png', '.gif', '.bmp', '.jpeg'],
      video: ['.mp4']
    }
  },
  watch: {
    fileUri: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    getFileId() {
      const begin = this.fileUri.lastIndexOf('/')
      const end = this.fileUri.lastIndexOf('.')
      if (begin !== -1 && end !== -1) {
        return this.fileUri.substring(begin + 1, end)
      }
      return null
    },
    close() {
      this.$refs.videoPlayer.pause()
      this.payUri = null
    },
    open() {
      if (this.type === 'video') {
        this.payUri = formatFileUri(this.fileUri)
        this.visible = true
      } else if (this.type === 'file' && this.ext == '.pdf') {
        const uri = formatFileUri(this.fileUri)
        window.open(uri)
      } else {
        const uri = formatFileUri(this.fileUri + '?isDown=true')
        window.open(uri)
      }
    },
    reset() {
      const begin = this.fileUri.lastIndexOf('/')
      const end = this.fileUri.lastIndexOf('.')
      if (begin !== -1 && end !== -1) {
        this.fileId = this.fileUri.substring(begin + 1, end)
      }
      this.ext = this.getExtName(this.fileUri)
      if (this.ext == null) {
        this.icon = 'file'
        this.type = 'file'
      } else {
        if (this.img.includes(this.ext)) {
          this.icon = formatFileUri(this.fileUri)
          this.type = 'img'
        } else if (this.video.includes(this.ext)) {
          const fileId = this.getFileId()
          this.icon = formatFileUri(getThumbnailUri(fileId))
          this.type = 'video'
        } else {
          this.icon = this.getIcon(this.ext)
          this.type = 'file'
        }
      }
    },
    getIcon(ext) {
      const icon = this.iconList[ext]
      if (icon == null) {
        return 'file'
      }
      return icon
    },
    getExtName(uri) {
      let index = uri.lastIndexOf('?')
      if (index !== -1) {
        uri = uri.substring(0, index)
      }
      index = uri.lastIndexOf('.')
      if (index === -1) {
        return null
      }
      return uri.substring(index).toLowerCase()
    }
  }
}
</script>
<style scoped>
.fileShow img {
  width: 100%;
}
.fileShow .el-button {
  padding: 0;
  border: none;
}
.fileShow .svg-icon {
  font-size: 36px;
}
</style>
